<template>
<div>
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @cancel="backToCinema"
  />
  <van-list>
    <van-cell v-for="data in computedCinemaList" :key="data.cinemaId" style="list-style:none!important">
      <div>{{data.name}}</div>
      <div class="address">{{data.address}}</div>
    </van-cell>
  </van-list>
</div>
</template>
<script>
import Vue from 'vue'
import { Search, Cell, List } from 'vant'
import { mapState, mapActions } from 'vuex'
Vue.use(Search).use(Cell).use(List)
export default {
  data () {
    return {
      value: ''
    }
  },
  computed: {
    ...mapState('CinemaModule', ['cinemalist']),
    ...mapState('CityModule', ['cityId']),
    computedCinemaList () {
      if (this.value === '') return []
      return this.cinemalist.filter(item => item.name.toUpperCase().includes(this.value.toUpperCase()) ||
      item.address.toUpperCase().includes(this.value.toUpperCase()))
    }
  },
  mounted () {
    if (this.cinemalist.length === 0) {
      // 走vuex的action
      this.cinemaGetMessage(this.cityId)
    } else {
      console.log('走缓存')
    }
  },
  methods: {
    ...mapActions('CinemaModule', ['cinemaGetMessage']),
    backToCinema () {
      this.$router.replace('/cinema')
    }
  }
}
</script>
<style scoped lang="scss">
ul{
  padding-left: 0px;
  li{
    margin: 5px;
    padding-left: 5px;
    .address{
      font-size: 12px;
      color: gray;
    }
  }

}
</style>
